<template>
  <div class="home">
    <div>
      <p>x: {{ mouse.x }}</p>
      <p>y: {{ mouse.y }}</p>
    </div>
    <br />
    <div>
      <div>count:{{ count }}</div>
      <button @click="add">++</button>
      <div>compontent:{{ cmt }}</div>
      <div>
        computed高级用法:
        <input type="text" v-model="hUse" />
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { ref, watch, reactive, onMounted, onUnmounted, computed } from 'vue'
export default {
  name: 'style-computefs',
  setup() {
    const mouse = reactive({
      x: 0,
      y: 0
    })
    const move = (e) => {
      mouse.x = e.pageX
      mouse.y = e.pageY
    }
    onMounted(() => {
      document.addEventListener('mousemove', move)
    })
    onUnmounted(() => {
      document.removeEventListener('mousemove', move)
    })
    const count = ref(0)
    const add = () => {
      count.value++
    }
    const cmt = computed(() => {
      // 必须要return
      return count.value + 2
    })

    const hUse = computed({
      get() {
        // 必须要return
        return count.value + 2
      },
      set(value) {
        count.value = value - 2
      }
    })

    return { mouse, count, add, cmt, hUse }
  }
}
</script>
